<script setup lang="tsx">
import { ref, onMounted } from "vue";
import {
  getInstanceDetails,
  InstanceDetails,
  InstanceDetailsReq
} from "@/api/job";
import { formatDate } from "@/utils/formatter";

const props = defineProps<InstanceDetailsReq>();

const instanceDetails = ref<InstanceDetails>({});

const columns = [
  {
    label: "实例ID",
    minWidth: 100,
    cellRenderer: () => {
      return (
        <el-tag size="large" class="!text-base">
          {instanceDetails.value.id}
        </el-tag>
      );
    }
  },
  {
    label: "状态",
    minWidth: 100,
    cellRenderer: () => {
      return (
        <el-tag size="large" class="!text-base">
          {instanceDetails.value.status}
        </el-tag>
      );
    }
  },
  {
    label: "运行次数",
    minWidth: 120,
    cellRenderer: () => {
      return (
        <el-tag size="large" class="!text-base">
          {instanceDetails.value.runningTimes}
        </el-tag>
      );
    }
  },
  {
    label: "预计执行时间",
    minWidth: 140,
    cellRenderer: () => {
      return (
        <el-tag size="large" class="!text-base">
          {formatDate(instanceDetails.value.expectedTriggerTime)}
        </el-tag>
      );
    }
  },
  {
    label: "开始时间",
    minWidth: 140,
    cellRenderer: () => {
      return (
        <el-tag size="large" class="!text-base">
          {formatDate(instanceDetails.value.actualTriggerTime)}
        </el-tag>
      );
    }
  },
  {
    label: "结束时间",
    minWidth: 140,
    cellRenderer: () => {
      return (
        <el-tag size="large" class="!text-base">
          {formatDate(instanceDetails.value.finishedTime)}
        </el-tag>
      );
    }
  }
];

const resultColumns = [
  {
    label: "任务参数",
    minWidth: 100,
    cellRenderer: () => {
      return (
        <el-tag size="large" class="!text-base">
          {instanceDetails.value.jobParams}
        </el-tag>
      );
    }
  },
  {
    label: "启动参数",
    minWidth: 100,
    cellRenderer: () => {
      return (
        <el-tag size="large" class="!text-base">
          {instanceDetails.value.instanceParams}
        </el-tag>
      );
    }
  },
  {
    label: "执行结果",
    minWidth: 100,
    cellRenderer: () => {
      return (
        <el-input
          v-model={instanceDetails.value.result}
          style="width: 900px"
          disabled
          type="textarea"
        />
      );
    }
  }
];

onMounted(() => {
  retrieveDetails();
});

function retrieveDetails() {
  getInstanceDetails(props).then(res => {
    instanceDetails.value = res;
  });
}
</script>
<template>
  <el-card class="m-4 box-card" shadow="never">
    <template #header>
      <el-button @click="retrieveDetails">刷新</el-button>
    </template>
    <el-scrollbar>
      <PureDescriptions border :columns="columns" :column="2" />
    </el-scrollbar>
    <template #footer>
      <el-scrollbar>
        <PureDescriptions border :columns="resultColumns" :column="1" />
      </el-scrollbar>
    </template>
  </el-card>
</template>
